﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" %>
<%@ Import Namespace="Typps" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="cc1" %>
<script runat="server">
    /*
        NOTE: WE ARE JUST SETTING UP A DEMO THAT TRIES TO COVER EVERYTHING THE EFFECTS
     * CONTROL HAS TO OFFER. USAGE IS VERY SIMPLE AND YOU'LL ONLY NEED TO SET VERY
     * FEW PROPERTIES DECLARATIVELY.
     */
    string selectedeffect = null;
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Page_Init(object sender, EventArgs e)
    {
        selectedeffect = Request.Form["dropdownlisteffect"];
    }
    /*use a foreach loop in prerender phase, loop through listbox and add them to effects control
	now that we disabled viewstate!*/
    protected void addnew_Click(object sender, EventArgs e)
    {
        clusterlist.Items.Add(selectedeffect);
    }

    void AddEffects(string effectName)
    {
        BaseEffect be = null;
        switch (effectName)
        {
            case "Blind":
                be = new Blind { Toggle = true };
                break;
            case "Fade":
                be = new Fade();
                break;
            case "Grow":
                be = new Grow { GrowCenter = true };
                break;
            case "Highlight":
                be = new Highlight { From = "#ffff00", To = "#9bc347", Toggle = true };
                break;
            case "Shake":
                be = new Shake();
                break;
            case "Slide":
                be = new Slide { Toggle = true };
                break;
            case "Squish":
                be = new Squish();
                break;
            case "Color":
                be = new ColorEffect { StartColor = "#ffff00", EndColor = "#b9d3da", Toggle = true };
                break;
            case "Move":
                be = new Move
                {
                    FromX = Unit.Parse("250"),
                    FromY = Unit.Parse("30"),
                    ToX = Unit.Parse("0"),
                    ToY = Unit.Parse("0")
                };
                break;
            case "Size":
                be = new Size
                {
                    FromWidth = Unit.Parse("700"),
                    FromHeight = Unit.Parse("200"),
                    ToWidth = Unit.Parse("500"),
                    ToHeight = Unit.Parse("161")
                };
                break;
            case "Fold":
                be = new Fold { Toggle = true };
                break;
            case "DropOut":
                be = new DropOut { Toggle = true };
                break;
            case "Puff":
                be = new Puff();
                break;
            case "Pulsate":
                be = new Pulsate();
                break;
        }
        Effects1.EffectsList.Add(be);
        /*
            Let's restore some of the effects back to what they were so that the animations can be replayed
         */
        switch (effectName)
        {
            case "Blind":
                Effects1.EffectsList.Add(new Blind());
                break;
            case "Slide":
                Effects1.EffectsList.Add(new Slide());
                break;
            case "Move":
                Effects1.EffectsList.Add(new Move
                {
                    FromX = Unit.Parse("0"),
                    FromY = Unit.Parse("0"),
                    ToX = Unit.Parse("250"),
                    ToY = Unit.Parse("30")
                });
                break;
            case "Size":
                Effects1.EffectsList.Add(new Size
                {
                    FromWidth = Unit.Parse("500"),
                    FromHeight = Unit.Parse("120"),
                    ToWidth = Unit.Parse("700"),
                    ToHeight = Unit.Parse("200")
                });
                break;
            case "Fold":
                Effects1.EffectsList.Add(new Fold());
                break;
            case "DropOut":
                Effects1.EffectsList.Add(new DropOut());
                break;
            case "Puff":
                Effects1.EffectsList.Add(new Puff { Toggle = true });
                break;
        }
    }
    protected void removeeffect_Click(object sender, EventArgs e)
    {
        if (clusterlist.Items.Count > 0 && clusterlist.SelectedIndex != -1)
            clusterlist.Items.Remove(clusterlist.Items[clusterlist.SelectedIndex]);
        else
            Label1.Visible = true;
    }

    protected void play_Click(object sender, EventArgs e)
    {
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (clusterlist.Items.Count == 0)
        {
            play.Attributes.Add("disabled", "true");
            removeeffect.Enabled = false;
        }
        else
        {
            play.Attributes.Remove("disabled");
            removeeffect.Enabled = true;
        }
        for (int num1 = clusterlist.Items.Count - 1; num1 >= 0; num1--)
        {
            ListItem li = clusterlist.Items[num1];
            AddEffects(li.Value);
        }
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
    .effect div
    {
	    float: left;
	    margin: 2px;
    }
    .multiselect select
    {
	    width: 200px;
	    margin: 5px;
    }
    #inputrunanimation
    {
	    margin: 10px auto 0 auto;
    }
    .elementcontainer
    {
	    height: 200px;
    }
    #element1
    {
	    background: yellow;
	    width: 500px;
	    height: 161px;
	    margin: 0 auto 0 auto;
	    border: solid 2px gray;
	    padding: 5px;
    }
    #element1 h1
    {
	    border-bottom: 1px solid gray;
	    margin: 5px;
    }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>Typps Special effects</h1>
<div class="effect">
        <label for="dropdownlisteffect">
            Effect:</label>
        <select name="dropdownlisteffect" id="dropdownlisteffect">
            <option value="Grow" selected="selected">Grow</option>
            <option value="Fade">Fade</option>
            <option value="Highlight">Highlight</option>
            <option value="Shake">Shake</option>
            <option value="Slide">Slide</option>
            <option value="Squish">Squish</option>
            <option value="Blind">Blind</option>
            <option value="Color">Color</option>
            <option value="Move">Move</option>
            <option value="Size">Size</option>
            <option value="Fold">Fold</option>
            <option value="DropOut">DropOut</option>
            <option value="Puff">Puff</option>
            <option value="Pulsate">Pulsate</option>
        </select>
    </div>
    <br style="clear: both" />
    <hr />
    <div class="multiselect">
        <select name="clusterlist" id="clusterlist" size="10" multiple="true" runat="server">
        </select>
        <asp:Button ID="addnew" runat="server" Text="Add effect" OnClick="addnew_Click" />
        <asp:Button ID="removeeffect" runat="server" Text="Remove effect" OnClick="removeeffect_Click" />
        <asp:Label ForeColor="Red" Font-Bold="true" ID="Label1" EnableViewState="false" Visible="false" 
        Text="toot* toot* Try selecting an effect in the listbox before attempting to remove!" runat="server"></asp:Label>
    </div>
    <div>
        (<strong>First combine your effect/s by selecting via the dropdownlists above, then
            add them to the list or remove selected effect from list as desired. The play button will
            enable itself below. Click it to play your newly created animation.</strong>)</div>
    <br style="clear: both" />
    <div>
        <input type="button" value="Play animation" onclick="animate();" id="play" runat="server" /></div>
    <div class="elementcontainer">
        <div id="element1">
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
            Nulla feugiat urna id dolor molestie lobortis dictum sapien varius. 
            Suspendisse a enim non odio congue scelerisque nec quis felis.
            Sed ut massa a diam blandit fringilla egestas vitae lectus.
        </div>
    </div>
    <p>
        A few things to note : While the above demo allows you to add animations and execute them in sequential
        order (you can also execute them in parallel), producing a unique animation by combining different effects, it doesn't allow you to set additional
        properties on individual effects, instead it's using the defaults.
        This is very much possible as each effect allows you to set : 
    </p> 
    <ol>
        <li>Transition effect</li>
        <li>Duration</li>
        <li>From value in % or pixels</li>
        <li>To value in % or pixels</li>
        <li>FPS -frames per second</li>
        <li>Toggle -whether you want the effect to toggle back when it's re-applied</li>
        <li>A runmode -this determines whether the effect should run simulataneously or in sequence</li>
        <li>... few other properties unique to each effect ( best time to make use of the power of intellisense )</li>
    </ol>
    <p>
        Importantly, you can set all this serverside in designview, declaratively in HTML View,
        and imperative code. Infact, this control is
        so simple applying effects couldn't be more fun. A sample fragment of declarative code :
    </p>
    <table style="width: 100%;">
    <tbody>
      <tr>
        <td colspan="2" style="font-weight: bold;">ASP.NET</td>
      </tr>
      <tr>
        <td style="text-align: right; vertical-align: top; width: 1%;">
          <br />
        </td>
        <td style="vertical-align: top; width: 99%;">
          <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">cc1</span>:<span style="color: rgb(255, 0, 0);">Effects</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"Effects1"</span> <span style="color: rgb(255, 0, 0);">TargetControl</span>=<span style="color: rgb(0, 0, 255);">"element1"</span> <span style="color: rgb(255, 0, 0);">RunMode</span>=<span style="color: rgb(0, 0, 255);">"AddNextEffect"</span> <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />        <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">EffectsList</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">cc1</span>:<span style="color: rgb(255, 0, 0);">Blind</span> <span style="color: rgb(255, 0, 0);">Duration</span>=<span style="color: rgb(0, 0, 255);">"0.5"</span> <br />                    <span style="color: rgb(255, 0, 0);">Transition</span>=<span style="color: rgb(0, 0, 255);">"LinearTransition"</span> <span style="color: rgb(255, 0, 0);">From</span>=<span style="color: rgb(0, 0, 255);">"100%"</span> <span style="color: rgb(255, 0, 0);">To</span>=<span style="color: rgb(0, 0, 255);">"0%"</span> <span style="color: rgb(0, 0, 255);">/&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">cc1</span>:<span style="color: rgb(255, 0, 0);">Slide</span> <span style="color: rgb(0, 0, 255);">/&gt;</span><br />            ...add more effects here declaratively if you prefer<br />        <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">EffectsList</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />    <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">cc1</span>:Effects<span style="color: rgb(0, 0, 255);">&gt;</span><br /></pre>
        </td>
      </tr>
    </tbody>
  </table>
    <p>
        You can attempt the same thing imperatively in code like this : 
    </p>
    <table style="width: 100%;">
        <tbody>
          <tr>
            <td colspan="2" style="font-weight: bold;">C#</td>
          </tr>
          <tr>
            <td style="text-align: right; vertical-align: top; width: 1%;">
              <br />
            </td>
            <td style="vertical-align: top; width: 99%;">
              <pre>Effects1.EffectsList.Add(<span style="color: rgb(0, 0, 255);">new</span> Blind { <br />                    Transition = TransitionName.LinearTransition, <br />                    Duration = 0.5d, <br />                    From = Unit.Parse("<span style="color: rgb(139, 0, 0);">100%</span>"), <br />                    To = Unit.Parse("<span style="color: rgb(139, 0, 0);">0%</span>") <br />               });<br />        Effects1.EffectsList.Add(<span style="color: rgb(0, 0, 255);">new</span> Slide());<br />        <span style="color: rgb(0, 128, 0);">//add more if you like and create your unique effect. </span><br />        <span style="color: rgb(0, 128, 0);">//fyi, you only need one effect in most cases</span><br /></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>
        Take into consideration that an effect may look nice using a certain transition while using the same algorithm 
        with another effect may have a different perception. For more on the properties and usage read the
        official documentation provided by adobe. This control is a .net wrapper around the First Class
        Adobe Spry effects library ( an opensource(BSD) js library developed by Adobe).
      </p>
      <p>
        Reference : <a href="http://labs.adobe.com/technologies/spry/articles/effects_coding/index.html">Effects coding clientside</a> and
        <a href="http://livedocs.adobe.com/en_US/Spry/SDG/WSF5A3CC7A-BEEA-4f70-A5D6-5F35D7B65DC3.html">About Spry effects </a>
      </p>
      <p>
        The reason for a .NET wrapper is because since usage can be overwhelming, it's not exactly intuitive
        the first time around to a novice js developer. To the more experienced it's simply a bore to have
        to either remember all the settings or keep writing the same boring mundane code to get an effect the
        way you would desire it. As a .net wrapper, adding the effects
        from within the VS.NET enviornment is easier and much faster development wise. You simply don't have
        to write a single line of js code to achieve any of the effects. The js is automatically generated
        by this control in the form of a json string describing each effect.
      </p>
      <p>
       While, this control is a standalone control and has no dependencies on other controls within the
       Typps, the prime motivation for developing it was for usage with mediaframe 
       to allow you to define your effects easily declaratively or in c# code. 
      </p>
      <p>A few more important things you want to note quickly is how this control does not output any rendering 
      markup, but rather a minimum, compact json string. The wrapper itself is no more than 3kb in size.
      It is intuitive and doesn't make you cringe by overwhelming you with options and settings. Viewstate is
      optional and also minimum. Infact, most of the viewstate you see in the viewsource of this page is
      what is used up by the listbox.</p>
      <p><strong>Clientside events:</strong> We also expose all events fired by each animation. You can register
      a clientside method to this easily by passing your function name or delegate to the respective
      OnClientEventName property. Eg : if you were interested in registering for onPreEffect notification 
      which will fire when the effect is about to start the element animation, you may attempt the following :</p>
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td colspan="2" style="font-weight: bold;">ASP.NET</td>
          </tr>
          <tr>
            <td style="text-align: right; vertical-align: top; width: 1%;">
              <br />
            </td>
            <td style="vertical-align: top; width: 99%;">
              <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">cc1</span>:<span style="color: rgb(255, 0, 0);">Effects</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"Effects1"</span> <span style="color: rgb(255, 0, 0);">OnClientPreEffect</span>=<span style="color: rgb(0, 0, 255);">"onPreEffect"</span>...<span style="color: rgb(0, 0, 255);">/&gt;</span><br /></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>And subsequently add the js event in your own script eg :</p>
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td colspan="2" style="font-weight: bold;">JavaScript</td>
          </tr>
          <tr>
            <td style="text-align: right; vertical-align: top; width: 1%;">
              <br />
            </td>
            <td style="vertical-align: top; width: 99%;">
              <pre>&lt;script type="<span style="color: rgb(139, 0, 0);">text/javascript</span>"&gt;<br />        <span style="color: rgb(0, 0, 255);">function</span> onPreEffect(eff) { <br />            <span style="color: rgb(0, 128, 0);">//do something here</span><br />        }<br />    &lt;/script&gt;<br /></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>In a similar fashion you can register for various kinds of notifications such as : </p>
      <ol>
          <li>onPreEffect</li>
          <li>onStep</li>
          <li>onPostEffect</li>
          <li>onCancel</li>
          <li>onToggle</li>
      </ol>
      <p>Above you are registering to each notification individually. You can also register a single observer
      function that will fire for all notifications above. eg :</p>
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td colspan="2" style="font-weight: bold;">ASP.NET</td>
          </tr>
          <tr>
            <td style="text-align: right; vertical-align: top; width: 1%;">
              <br />
            </td>
            <td style="vertical-align: top; width: 99%;">
              <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">cc1</span>:<span style="color: rgb(255, 0, 0);">Effects</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"Effects1"</span> <span style="color: rgb(255, 0, 0);">OnClientObserver</span>=<span style="color: rgb(0, 0, 255);">"onObserver"</span> .. <span style="color: rgb(0, 0, 255);">/&gt;</span><br /></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>Now your clientside function you just registered above :</p>
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td colspan="2" style="font-weight: bold;">JavaScript</td>
          </tr>
          <tr>
            <td style="text-align: right; vertical-align: top; width: 1%;">
              <br />
            </td>
            <td style="vertical-align: top; width: 99%;">
              <pre><span style="color: rgb(0, 0, 255);">function</span> onObserver(notificationType, eff) {<br />            <span style="color: rgb(0, 0, 255);">if</span>(notificationType=='onPreEffect') {<br />                <span style="color: rgb(0, 0, 255);">alert</span>('onPreEffect called !');<br />            } <span style="color: rgb(0, 0, 255);">else</span> <span style="color: rgb(0, 0, 255);">if</span>(notificationType=='onStep') {<br />                <span style="color: rgb(0, 0, 255);">alert</span>('onStep called !');<br />            }<br />        }<br /></pre>
            </td>
          </tr>
        </tbody>
      </table>
      <p>Note how your function takes appropriate action based on the notification type. Simple as eating cake. 
      Reference also <a href="http://labs.adobe.com/technologies/spry/demos/effects/index.html">Adobe's online demo</a></p>
      
    <cc1:Effects ID="Effects1" TargetControl="element1" OnClientPostEffect="onPostEffect" RunMode="AddNextEffect" runat="server" EnableViewState="false">
    </cc1:Effects>
    <script type="text/javascript">
        function animate(args) {
            var effects=$find('<%= Effects1.ClientID %>');
            effects.start();
            effects.toggle();
        }
        /*The puff effect just fades away, so let's tweak it for our demo*/
        function onPostEffect(eff) {
            if(eff.name=='Puff') {
                var opacity=Spry.Effect.getOpacity(eff.element);
                if(opacity==0) {
                    eff.element.style.top=0;
                    eff.element.style.left=0;
                    Spry.Effect.enforceVisible(eff.element);
                    var o=new Spry.Effect.Opacity(eff.element.id,0,100,{ toggle: false });
                    o.start();
                }
            }
        }
    </script>
</asp:Content>

